<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<%@ include file="/WEB-INF/views/include.inc.jsp"%>
		<script type="text/javascript">
			$(document).ready(function() {
				//改变主题下拉框
				$("select[name='theme']").change(selectTheme)
				function selectTheme(){
					var selectText = $(this).find("option:selected").text(); 
					var selectValue = $(this).val();
					$(".echarts").attr("echarts-theme",selectValue);
					$(".echarts").dblclick();
				}
				//传递表单参数
				$("#submitButton").click(function(){
					$("#demo-bar3d").dblclick();
				});	
		    });
		</script>
	</head>
	<body>
	
<a href="${contextPath}/rest/restGet?id=1">发送GET请求</a>

<form action="${contextPath}/rest/restPost" method="post">
    <input type="text" name="id" value="2"/>
    <input type="submit" value="发送POST请求"/>
</form>

<form action="${contextPath}/rest/restPut" method="post">
    <input type="hidden" name="_method" value="PUT">
    <input type="text" name="id" value="3">
    <input type="submit" value="发送PUT请求">
</form>


<form action="${contextPath}/rest/restDelete" method="post">
    <input type="hidden" name="_method" value="DELETE">
    <input type="text" name="id" value="4">
    <input type="submit" value="发送DELETE请求">
</form>

<h1>1 图表主题切换<h1>
		<select name="theme">
			<option value="dark-blue">dark-blue</option>
			<option value="dark-green">dark-green</option>
			<option value="dark-unica">dark-unica</option>
			<option value="gray">gray</option>
			<option value="grid-light">grid-light</option>
			<option value="grid">grid</option>
			<option value="sand-signika">sand-signika</option>
			<option value="skies">skies</option>
		</select>
		<img id="echarts-theme"/>
<h1>2 图表参数传递<h1>
		<form>		
			<input name="dateStr" value="日期"/>
			<input name="temperatureStr" value="温度"/>
		</form>
		<button id="submitButton">测试传入参数</button>
<h1>8 HighCharts 3D图表：Bar、Pie</h1>
		<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-bar3d" style="float:left" class="echarts"
			echarts-type="bar3d"
			echarts-title="未来一周气温变化" 
			echarts-subtitle="条形图"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="温度(°C)" 
			echarts-url="${contextPath}/highcharts/bar3d"
		></div>
		<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-pie3d" style="float:left" class="echarts"
			echarts-type="pie3d"
			echarts-title="搜索引擎现状" 
			echarts-subtitle="饼状图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/highcharts/pie3d"
		></div>
		<div style="clear:both"></div>
<h1>9 HighCharts Table To Charts</h1>
<h1>一、Table转柱状图</h1>
<table class="highchart-column" data-graph-container-before="1" data-graph-type="column">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-column')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>二、Table转折线图</h1>
<table class="highchart-line" data-graph-container-before="1" data-graph-type="line">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-line')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>
	
	
<h1>三、Table转饼状图</h1>
<table class="highchart-pie" data-graph-container-before="1" data-graph-type="pie">
  <caption>2016销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>112000</td>
      </tr>
       <tr>
          <td>三月</td>
          <td>12000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-pie')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>四、Table转面积图</h1>
<table class="highchart-area" data-graph-container-before="1" data-graph-type="area">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-area')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

<h1>五、Table转spline类型图（没看出有什么区别）</h1>
<table class="highchart-spline" data-graph-container-before="1" data-graph-type="spline">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>
<script type="text/javascript">
	$('table.highchart-spline')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>
	</body>
</html>